<template>
	<div class="ind-recnews pb3">
		<div class="rec-channe">
			<ul class="channe-ul clearfix" id="channe-nav" v-on:touchstart="touchstart" v-on:touchmove="touchmove" v-on:touchend="touchend">
				<li class="channe-li" v-on:click="channe(index,o.cid,o.title)" v-for="(o,index) in tabtit" v-bind:class="{'curr':active == index}">{{ o.title }}</li>
			</ul>
		</div>
		
		<!--<h1 class="recnews-title pl3 pr3 bg-fff">{{ activetitle }}</h1>-->
		<div class="rec-newlist pt3 pl3 pr3  bg-fff">
			<div class="news-box mb3" v-for="(o,index) in recnews" v:bind:item="o" v-bind:index="index">
				<router-link :to="{path:'/newsdetail',query: {id: o.link}}">
					<h2 class="news-btitle">{{ o.title }}</h2>
					<div class="news-bimg clearfix" >
						<div class="imgso fl" v-for="(t,ind) in o.imageurls" v:bind:item="t" v-bind:index="ind" v-if="ind < 3">
							<img class="imgblock" :src="t.url">
						</div>
					</div>
					<div class="new-other  pt4 pb4 clearfix">
						<span class="newoth-source fl">来源：{{ o.source }}</span>
						<span class="newoth-time fr">时间：{{ o.pubDate }}</span>
					</div>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	
	export default{
		data(){
			return{
				tabtit:[
					{
						"title":'国内',
						"cid":'5572a108b3cdc86cf39001cd'
					},
					{
						"title":'国际',
						"cid":'5572a108b3cdc86cf39001ce'
					},
					{
						"title":'军事',
						"cid":'5572a108b3cdc86cf39001cf'
					},
					
					{
						"title":'财经',
						"cid":'5572a108b3cdc86cf39001d0'
					},
					{
						"title":'互联网',
						"cid":'5572a108b3cdc86cf39001d1'
					},
					{
						"title":'房产',
						"cid":'5572a108b3cdc86cf39001d2'
					},
					{
						"title":'汽车',
						"cid":'5572a108b3cdc86cf39001d3'
					},
					{
						"title":'体育',
						"cid":'5572a108b3cdc86cf39001d4'
					},
					
					{
						"title":'娱乐',
						"cid":'5572a108b3cdc86cf39001d5'
					},
					{
						"title":'游戏',
						"cid":'5572a108b3cdc86cf39001d6'
					},
					{
						"title":'教育',
						"cid":'5572a108b3cdc86cf39001d7'
					},
					{
						"title":'女人',
						"cid":'5572a108b3cdc86cf39001d8'
					},
					{
						"title":'科技',
						"cid":'5572a108b3cdc86cf39001d9'
					},
					{
						"title":'社会',
						"cid":'5572a109b3cdc86cf39001da'
					},
					{
						"title":'国内最新',
						"cid":'5572a109b3cdc86cf39001db'
					},
					{
						"title":'台湾',
						"cid":'5572a109b3cdc86cf39001dc'
					},
					{
						"title":'港澳',
						"cid":'5572a109b3cdc86cf39001dd'
					},
					{
						"title":'国际最新',
						"cid":'5572a109b3cdc86cf39001de'
					},
					
					{
						"title":'军事',
						"cid":'5572a109b3cdc86cf39001df'
					},
					{
						"title":'财经',
						"cid":'5572a109b3cdc86cf39001e0'
					},
					{
						"title":'理财',
						"cid":'5572a109b3cdc86cf39001e1'
					},
					{
						"title":'宏观经济',
						"cid":'5572a109b3cdc86cf39001e2'
					},
					{
						"title":'互联网最新',
						"cid":'5572a109b3cdc86cf39001e3'
					},
					{
						"title":'房产最新',
						"cid":'5572a109b3cdc86cf39001e4'
					},
					{
						"title":'汽车最新',
						"cid":'5572a109b3cdc86cf39001e5'
					},
					{
						"title":'体育',
						"cid":'5572a109b3cdc86cf39001e6'
					},
					{
						"title":'国际足球',
						"cid":'5572a109b3cdc86cf39001e7'
					},
					{
						"title":'国内足球',
						"cid":'5572a109b3cdc86cf39001e8'
					},
					{
						"title":'CBA',
						"cid":'5572a109b3cdc86cf39001e9'
					},
					{
						"title":'综合体育',
						"cid":'5572a10ab3cdc86cf39001ea'
					},
					{
						"title":'娱乐',
						"cid":'5572a10ab3cdc86cf39001eb'
					},
					{
						"title":'电影',
						"cid":'5572a10ab3cdc86cf39001ec'
					},
					{
						"title":'电视',
						"cid":'5572a10ab3cdc86cf39001ed'
					},
					{
						"title":'游戏',
						"cid":'5572a10ab3cdc86cf39001ee'
					},
					{
						"title":'教育',
						"cid":'5572a10ab3cdc86cf39001ef'
					},
					{
						"title":'女人最新',
						"cid":'5572a10ab3cdc86cf39001f0'
					},
					{
						"title":'美容护肤',
						"cid":'5572a10ab3cdc86cf39001f1'
					},
					{
						"title":'情感两性',
						"cid":'5572a10ab3cdc86cf39001f2'
					},
					{
						"title":'健康养生',
						"cid":'5572a10ab3cdc86cf39001f3'
					},
					{
						"title":'科技',
						"cid":'5572a10ab3cdc86cf39001f4'
					},
					{
						"title":'数码',
						"cid":'5572a10bb3cdc86cf39001f5'
					},
					{
						"title":'电脑',
						"cid":'5572a10bb3cdc86cf39001f6'
					},
					{
						"title":'科普',
						"cid":'5572a10bb3cdc86cf39001f7'
					},
					{
						"title":'社会',
						"cid":'5572a10bb3cdc86cf39001f8'
					}
				],
				recnews:[],
				active: 0,
				activetitle:'国内',
				cid:'',
				sx:0,
				ex:0,
				cx:0
			}
		},
		mounted: function(){
			let url = this.HOST + '/109-35';
			let sign = 'bc41dbe15d504543b791fe0cc5a80e50';
			this.active = localStorage.getItem("activeid")
			this.activetitle = localStorage.getItem("activetitle")
			axios({
				method: 'post',
				url: url,
				params: {
					'showapi_appid':'54164',
			    	'showapi_sign':sign,
			    	'channelId':'5572a108b3cdc86cf39001cd',
			    	'page':'1',
			    	'maxResult':'40'
				}
			}).then((res) => {
				console.log(res.data.showapi_res_body.pagebean.contentlist)
				this.recnews = res.data.showapi_res_body.pagebean.contentlist
			})
		},
		methods:{
			channe:function(i,channeid,title){
				let url = this.HOST + '/109-35';
				let sign = 'bc41dbe15d504543b791fe0cc5a80e50';
				this.active = i
				this.activetitle = title
				this.cid = channeid
				localStorage.setItem("activeid",i)
				localStorage.setItem("activetitle",title)
				axios({
					method:'post',
					url:url,
					params:{
						'showapi_appid':'54164',
			    		'showapi_sign':sign,
			    		'channelId':this.cid,
			    		'page':'1',
			    		'maxResult':'40'
					}
				}).then((res) => {
					console.log(res.data.showapi_res_body.pagebean.contentlist)
					this.recnews = res.data.showapi_res_body.pagebean.contentlist
				}) 
			},
			touchstart:function(e){
				var touch = e.targetTouches[0];
	            //滑动起点的坐标
	            this.sx = touch.pageX
	            //console.log("起始滑动值："+this.sx)
			},
			touchmove:function(e){
				var touch = e.targetTouches[0];
            	//手势滑动时，手势坐标不断变化，取最后一点的坐标为最终的终点坐标
                this.ex = touch.pageX
                this.cx = (this.sx - this.ex) > 0 ? (-(this.sx - this.ex)) : (this.sx - this.ex)
                //console.log("滑动的距离："+this.ex)
                //console.log("距离值："+ this.cx)
                document.getElementById("channe-nav").style.marginLeft= this.cx+'px'
			},
			touchend:function(e){
				//console.log("滑动结束")
				//var startX =0;
				//var startY = 0;
				//var endX =0;
				var distanceX=this.ex-this.cx;
                //console.log("滑动结束值:"+distanceX);
                //console.log("结束距离值："+parseInt(startX)-parseInt(endX))
               
			}
		}
	}
</script>

<style>
</style>